<template>
  <MenuPage 
        :data="trainData" 
        :columns="trainCol"
        :total="trainTotal"
        :size.sync="pageSize"
        :page.sync="page"
        @queryFun="getTrainList">
        <template slot="search">
            <Button
              ghost
              style="height: 32px;margin-left: 15px"
              type="primary"
              class="md-add-jh"
              @click="creatSceneBtn"
              >创建场景</Button
            >
            <!-- <Input placeholder="任务名称" clearable style="width: 150px;margin-left: 15px"/>
                      <Input placeholder="创建者" clearable style="width: 150px;margin-left: 15px"/>
                      <Input placeholder="使用的工程" clearable style="width: 150px;margin-left: 15px"/>
                      <Input placeholder="任务内容" clearable style="width: 150px;margin-left: 15px"/>
                      <Input placeholder="任务目标" clearable style="width: 150px;margin-left: 15px"/>
                      <Select filterable  placeholder="执行进度" style="width: 150px;margin-left: 15px" >
                          <Option value="all">执行进度</Option>
                          <Option value="leader">未开始</Option>
                          <Option value="member">进行中</Option>
                          <Option value="referee">已结束</Option>
                      </Select>
                      <DatePicker  type="datetimerange" format="yyyy-MM-dd HH:mm:ss"  placement="bottom-end"
                      placeholder="请选择时间段" style="width: 300px;margin-left: 15px" :clearable='false'></DatePicker> -->
        </template>
  <div class="page-wrap" v-if="false">
    <div class="page-content company-page">
      <div class="img-header">
        <div class="class-title-wrap">
          <div class="class-title">
            <div class="class-title-all">{{pageTitle}}</div>
          </div>
        </div>
        <div class="member-filter-wrap">
          <Button
            ghost
            style="height: 32px;margin-left: 15px"
            type="primary"
            class="md-add-jh"
            @click="creatSceneBtn"
            >创建场景</Button
          >
          <!-- <Input placeholder="任务名称" clearable style="width: 150px;margin-left: 15px"/>
                    <Input placeholder="创建者" clearable style="width: 150px;margin-left: 15px"/>
                    <Input placeholder="使用的工程" clearable style="width: 150px;margin-left: 15px"/>
                    <Input placeholder="任务内容" clearable style="width: 150px;margin-left: 15px"/>
                    <Input placeholder="任务目标" clearable style="width: 150px;margin-left: 15px"/>
                    <Select filterable  placeholder="执行进度" style="width: 150px;margin-left: 15px" >
                        <Option value="all">执行进度</Option>
                        <Option value="leader">未开始</Option>
                        <Option value="member">进行中</Option>
                        <Option value="referee">已结束</Option>
                    </Select>
                    <DatePicker  type="datetimerange" format="yyyy-MM-dd HH:mm:ss"  placement="bottom-end"
                    placeholder="请选择时间段" style="width: 300px;margin-left: 15px" :clearable='false'></DatePicker> -->
        </div>
      </div>
      <div class="table-wrap">
        <div style="height: 100%;">
          <!-- 新列表 -->
          <div v-show="showMembersData">
            <div class="content-wrap">
              <div class="project-item" v-for="(item, key) in trainData" :key="key">
                <div class="item-first-line">
                  <div class="project-name-state">
                    <div class="project-status-text">
                      <p style="margin-right:8px;" class="display-flex">
                        <span>{{ handleMemIndex(key) }}.训练名称：</span>
                        <template v-if="item.name">
                          <Tooltip :max-width="400" :content="item.name" placement="top-start">
                            <span
                              style="color: #1563C2 ;cursor: pointer; width: 180px"
                              class="text-ellipsis"
                              @click="toSceneDetail(item)"
                              >{{ item.name }}</span
                            >
                          </Tooltip>
                        </template>
                        <template v-else>
                          <span style="width: 180px;" class="text-ellipsis"></span>
                        </template>
                      </p>
                      <p style="margin-right:8px;" class="display-flex">
                        <span>工程名称：</span>
                        <template v-if="item.projectName">
                          <Tooltip
                            :max-width="400"
                            :content="item.projectName"
                            placement="top-start"
                          >
                            <span style="width: 180px;" class="text-ellipsis">{{
                              item.projectName
                            }}</span>
                          </Tooltip>
                        </template>
                        <template v-else>
                          <span style="width: 180px;" class="text-ellipsis"></span>
                        </template>
                      </p>
                    </div>
                  </div>
                  <div class="btn-icon-wrap">
                    <img
                      :src="setModifyNicknameImgSrc(item)"
                      class="click-icon"
                      alt="Modify"
                      title="修改训练场景"
                      @click="modifyTrainBtn(item)"
                    />
                    <Poptip
                      transfer
                      confirm
                      title="确定要删除训练吗？"
                      placement="left"
                      @on-ok="delTrain(item)"
                    >
                      <img
                        src="../../assets/project/delNote-h.png"
                        class="click-icon"
                        alt="Del"
                        title="移除"
                      />
                    </Poptip>
                  </div>
                </div>
                <div class="project-other-info">
                  <p style="margin-right:20px;" class="display-flex">
                    <span>单位：</span>
                    <template v-if="item.companyName">
                      <Tooltip :max-width="400" :content="item.companyName" placement="top-start">
                        <span style="width: 206px;" class="text-ellipsis">{{
                          item.companyName
                        }}</span>
                      </Tooltip>
                    </template>
                    <template v-else>
                      <span style="width: 206px;" class="text-ellipsis"></span>
                    </template>
                  </p>
                  <p
                    style="margin-right:8px;width: 200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
                  >
                    <span>创建者：</span>
                    <span>{{ item.creatorName }}</span>
                  </p>
                  <p
                    style="margin-right:8px;width: 220px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
                  >
                    <span>开始时间：</span>
                    <span>{{ item.startTime }}</span>
                  </p>
                  <p
                    style="margin-right:8px;width: 220px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"
                  >
                    <span>结束时间：</span>
                    <span>{{ item.endTime }}</span>
                  </p>
                  <p style="margin-right:8px;min-width: 120px;" class="display-flex">
                    <span>描述：</span>
                    <template v-if="item.description">
                      <Tooltip :max-width="400" :content="item.description" placement="top-start">
                        <span style="width: 400px;" class="text-ellipsis">{{
                          item.description
                        }}</span>
                      </Tooltip>
                    </template>
                    <template v-else>
                      <span style="width: 400px;" class="text-ellipsis"></span>
                    </template>
                  </p>
                  <!-- <p style="margin-right:8px;">
                                        <span>创建时间：</span>
                                        <span>{{item.created}}</span>
                                    </p> -->
                </div>
              </div>
            </div>
            <div style="display: flex;justify-content: center;margin: 15px 0">
              <Page
                :total="trainTotal"
                :page-size="pageSize"
                :current="page"
                show-total
                show-elevator
                @on-change="userGroupOnChange"
              />
            </div>
          </div>
          <div v-show="showMembersImg" class="defGraphWrap">
            <div class="defGraph"></div>
            <div class="graphText">暂无信息</div>
          </div>
        </div>
      </div>
    </div>

   
  </div>
   <!--创建训练-->
   <Modal
   v-model="formVModel"
   :mask-closable="false"
   width="500"
   :footer-hide="true"
   :title="modelTitle"
 >
   <Form ref="formV" :model="formV" :rules="formVRule" :label-width="80">
     <FormItem label="工程" prop="projectId">
       <Select filterable
         v-model="formV.projectId"
         filterable
         placeholder="请选择工程"
         label-in-value
         @on-change="getPrjName"
       >
         <Option
           v-for="item in prjlists"
           :value="item.id"
           :key="item.id"
           :title="item.name"
           :label="item.name"
           >{{ item.name }}
         </Option>
       </Select>
     </FormItem>
     <FormItem label="工程场景" prop="testId">
       <Select filterable v-model="formV.testId" placeholder="请选择场景" label-in-value>
         <Option
           v-for="item in testList"
           :value="item.id"
           :key="item.id"
           :label="item.name"
           :title="item.name"
         >
           {{ item.name }}
         </Option>
       </Select>
     </FormItem>
     <FormItem label="名称" prop="name">
       <Input
         v-model.trim="formV.name"
         placeholder='不能包含下列任意英文字符 \ / : * ? " < > |，长度为1-20个字符'
         :maxlength="20"
       ></Input>
     </FormItem>
     <FormItem label="时间" prop="Dates">
       <DatePicker
         :editable="false"
         type="datetimerange"
         :value="formV.Dates"
         format="yyyy-MM-dd HH:mm"
         placement="bottom-start"
         confirm
         ref="datePicker"
         placeholder="选择日期"
         style="width: 280px"
         transfer
         :options="disabledOptions"
         @on-ok="clickOkBtn"
         @on-clear="clickClearBtn"
         @on-open-change="switchOpenChange"
         @on-change="changeDates"
       ></DatePicker>
       <p style="color:#ff9900;font-size:10px;line-height: 2;">
         <Icon type="ios-information-circle-outline" />
         选择同一天的时间段，请先双击要选择的日期
       </p>
       <p style="color:#ff9900;font-size:10px;line-height: 2;">
         <Icon type="ios-information-circle-outline" />
         开始时间不能小于当前时间
       </p>
       <p style="color:#ff9900;font-size:10px;line-height: 2;">
         <Icon type="ios-information-circle-outline" />
         建议提前四小时配置环境
       </p>
       <p style="color:#ff9900;font-size:10px;line-height: 2;">
         <Icon type="ios-information-circle-outline" />
         最长时间间隔为一周
       </p>
     </FormItem>

     <FormItem label="描述" prop="description">
       <Input
         v-model.trim="formV.description"
         type="textarea"
         :maxlength="200"
         :autosize="{ minRows: 2, maxRows: 5 }"
         placeholder="描述"
       ></Input>
     </FormItem>
     <FormItem>
       <Button type="primary" @click="submitBtn('formV')" :loading="modelLoading">确定</Button>
       <Button @click="resetBtn('formV')" style="margin-left: 8px">重置</Button>
     </FormItem>
   </Form>
 </Modal>

 <!--测试-->
 <Modal
   v-model="formVModel2"
   :mask-closable="false"
   width="500"
   :footer-hide="true"
   title="资源需求登记"
 >
   <Form ref="formV2" :model="formV2" :rules="formVRule2" :label-width="120">
     <FormItem label="设备型号" prop="name">
       <Input v-model.trim="formV2.name" placeholder="请输入设备型号" :maxlength="20"></Input>
     </FormItem>
     <!-- <FormItem label="资源" prop="res">
                 <Input v-model.trim="formV2.res" placeholder="资源"
                     :maxlength="20"></Input>
             </FormItem> -->
     <FormItem label="设备类型" prop="type">
       <Select filterable
         v-model="formV2.type"
         filterable
         placeholder="请选择设备类型"
         label-in-value
         @on-change="getPrjName"
       >
         <Option value="0">网络设备</Option>
         <Option value="1">安防设备</Option>
         <Option value="2">系统</Option>
       </Select>
     </FormItem>
     <FormItem label="需求描述" prop="mude">
       <Input
         v-model.trim="formV2.mude"
         type="textarea"
         :maxlength="200"
         :autosize="{ minRows: 2, maxRows: 5 }"
         placeholder="需求描述"
       ></Input>
     </FormItem>
     <FormItem label="设备数量" prop="num">
       <InputNumber
         :max="1024"
         :step="1"
         v-model="formV2.num"
         style="width: 130px"
       ></InputNumber>
     </FormItem>
     <!-- <FormItem label="关键点设备" prop="poirt">
                 <Input v-model.trim="formV2.poirt" placeholder="请输入关键点设备"
                     :maxlength="20"></Input>
             </FormItem> -->
     <FormItem label="部署位置" prop="add">
       <Input v-model.trim="formV2.add" placeholder="请输入部署位置" :maxlength="20"></Input>
     </FormItem>
     <FormItem label="拓扑文件" class="ivu-form-item-required">
       <Upload
         ref="uploadIcon"
         v-model="formV2.file"
         :format="['jpg', 'jpeg', 'png']"

         action=""
         style="display:inline-block;"
       >
         <Button icon="ios-cloud-upload-outline">拓扑文件</Button>
       </Upload>
       <WarningTip content="请上传jpg，jpeg，png，word，pdf格式文件"></WarningTip>
       <!-- <p style="color:#ff9900;font-size:10px;line-height: 2;">
                     <Icon type="ios-information-circle-outline"/>
                     支持图片、word或pdf等格式
                 </p> -->
     </FormItem>
     <FormItem label="使用时间" prop="Dates">
       <DatePicker
         :editable="false"
         type="datetimerange"
         :value="formV2.Dates"
         format="yyyy-MM-dd HH:mm"
         placement="bottom-start"
         confirm
         ref="datePicker"
         placeholder="选择日期"
         style="width: 280px"
         transfer
         :options="disabledOptions"
         @on-ok="clickOkBtn"
         @on-clear="clickClearBtn"
         @on-open-change="switchOpenChange"
         @on-change="changeDates"
       ></DatePicker>
     </FormItem>
     <FormItem>
       <Button type="primary" @click="submitBtn('formV2')" :loading="modelLoading">确定</Button>
       <Button @click="resetBtn('formV2')" style="margin-left: 8px">重置</Button>
     </FormItem>
   </Form>
 </Modal>
 </MenuPage>
</template>
<script>
import $ from 'jquery';
import encryption from '@/libs/encryption.js';
import { trainList, creatTrain, delTrain, modifyTrain } from '@/api/train.js';
import { getProjects, getTests } from '@/api/drill_compete';
import {validateNameCustom } from '@/libs/reg.js'
export default {
  components: {},
  data() {
    const validateDates = (rule, value, callback) => {
      if (value.length == 0) {
        callback(new Error('请选择训练日期'));
      } else {
        callback();
      }
    };
    const validateName = (rule, value, callback) => {
      if (value) {
        validateNameCustom(rule, value, callback, 20)
      } else {
        callback();
      }
    };
    return {
      // 用户信息
      USER_ID: '',
      isRootDesigner: '',
      companyId: '',
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      setTableHei: 'auto',
      // 表格显示
      showMembersData: false,
      showMembersImg: false,
      // 训练
      trainData: [],
      trainTotal: 0,
      page: 1,
      pageSize: 12,
      trainCol:[
        {
          type:'link',
          title:'训练名称',
          key:'name',
          tooltip:true,
          on:{
            click:(item) =>{
              this.toSceneDetail(item)
            }
          }
        },
        {
          title:'工程名称',
          key:'projectName',
          tooltip:true
        },
        {
          title:'工程名称',
          key:'projectName',
          tooltip:true
        },
        {
          title:'单位',
          key:'companyName',
          tooltip:true
        },
        {
          title:'开始时间',
          key:'startTime',
          tooltip:true
        },
        {
          title:'结束时间',
          key:'endTime',
          tooltip:true
        },
        {
          title:'描述',
          key:'description',
          tooltip:true
        },
        {
          title:'创建者',
          key:'creatorName',
          tooltip:true
        },
        {
          title:"操作",
          key:'action',
          opList:[
            {
              txt:"修改",
              fun:this.modifyTrainBtn,
              disabled:(data) => {
                return !(data.progress === 0 || data.progress === 3 || data.progress === 5)
              }
            },
            {
              txt:"删除",
              type:"delete",
              tooltip:true,
              title:"确定要删除训练吗？",
              fun:this.delTrain
            },
          ]
        }
      ],
      // 创建 / 修改 训练
      isCreat: true,
      modelTitle: '创建训练',
      modelLoading: false,
      formVModel: false,
      formV: {
        companyId: '',
        description: '',
        iconPath: '',
        name: '',
        projectId: '',
        projectName: '',
        testId: '',
        testName: '',
        startTime: '',
        endTime: '',
        Dates: []
      },
      formVRule: {
        name: [
          {
            type: 'string',
            required: true,
            min: 1,
            max: 20,
            message: '名称长度为1—20',
            trigger: 'change'
          },
          { validator: validateName, trigger: 'change' }
        ],
        projectId: [{ required: true, message: '请选择工程 ', trigger: 'change' }],
        testId: [{ required: true, message: '请选择场景 ', trigger: 'change' }],
        Dates: [{ required: true, validator: validateDates, trigger: 'change' }]
      },
      disabledOptions: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      isClickOkBtn: false, // 是否点击了DatePicker组件的确认按钮
      originalTime: [], // 展示DatePicker组件时的初始时间
      trainId: '',
      // 工程列表 / 场景列表
      prjlists: [],
      testList: [],
      // 测试
      formVModel2: false,
      formV2: {
        name: '',
        res: '',
        type: '',
        mude: '',
        num: 1,
        poirt: '',
        file: null,
        Dates: []
      },
      formVRule2: {
        name: [
          {
            type: 'string',
            required: true,
            min: 1,
            max: 64,
            message: '名称长度为1——64',
            trigger: 'change'
          }
        ],
        res: [{ required: true, message: '请选择工程 ', trigger: 'change' }],
        type: [{ required: true, message: '请选择场景 ', trigger: 'change' }],
        mude: [{ required: true, message: '请选择场景 ', trigger: 'change' }],
        add: [{ required: true, message: '请选择场景 ', trigger: 'change' }],
        poirt: [{ required: true, message: '请选择场景 ', trigger: 'change' }],
        Dates: [{ required: true, validator: validateDates, trigger: 'change' }]
      }
    };
  },
  computed: {
    pageTitle () {
      //当前菜单显示名
      return this.$route.meta.title;
    },
  },
  created() {
    // 获取用户id
    let November = sessionStorage.getItem('November');
    November = JSON.parse(encryption.SelfUseDecrypt(November));
    this.USER_ID = November.userId;
    this.isRootDesigner = November.isRootDesigner;
    this.isRetainer = sessionStorage.getItem('isRetainer') === 'true';
    this.companyId = November.companyId;
  },
  mounted() {
    //赋值查询条件
    let queryObj = sessionStorage.getItem('queryObj');
    if (queryObj) {
      let params = JSON.parse(queryObj);
      this.page = params.pageIndex;
      this.pageSize = params.pageSize;
      this.progress = params.progress;
      sessionStorage.removeItem('queryObj');
    }
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
    this.getTrainList();
  },
  methods: {
    // 设置高度
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      window.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = window.fullHeight;
      this.fullWidth = window.fullWidth;
      this.setTableHei = this.fullHeight - 197 + 'px';
      let num = this.fullHeight - 197;
      this.pageSize = Math.floor(num / 96);
    },
    // 训练列表
    getTrainList(val) {
      let params = {
        pageIndex: this.page,
        pageSize: this.pageSize,
        companyId: this.companyId,
        progress: ''
      };
      this.queryObj = JSON.stringify(params);
      trainList(params)
        .then((res) => {
          if (res.code === 1 || res.data.code === 1) {
            this.trainData = res.data.records || res.data.data.records;
            this.trainTotal = res.data.total || res.data.data.total;
            if (this.trainTotal > 0) {
              this.showMembersData = true;
              this.showMembersImg = false;
            } else {
              this.showMembersData = false;
              this.showMembersImg = true;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 过滤
    userGroupOnChange(val) {
      this.page = val;
      this.getTrainList();
    },
    // 计算成员列表index
    handleMemIndex(key) {
      return (this.page - 1) * this.pageSize + key + 1;
    },
    handleUserType(item) {
      if (item.progress === 0) {
        return '未开始';
      } else if (item.progress === 1) {
        return '进行中';
      } else if (item.progress === 2) {
        return '暂停';
      } else if (item.progress === 3) {
        return '已完成';
      } else if (item.progress === 4) {
        return '删除中';
      } else if (item.progress === 5) {
        return '删除失败';
      }
    },
    setModifyNicknameImgSrc(item) {
      if (item.progress === 0 || item.progress === 3 || item.progress === 5) {
        return require('../../assets/project/modifys-h.png');
      } else {
        return require('../../assets/project/modifys.png');
      }
    },
    // 创建场景
    creatSceneBtn() {
      // this.formVModel2 = true
      this.formVModel = true;
      this.isCreat = true;
      this.modelTitle = '创建训练';
      this.resetBtn('formV');
      this.getPrjList();
    },
    // 获取工程列表
    getPrjList() {
      let params = {};
      params.pageIndex = 1;
      params.pageSize = 2147483647;
      params.status = 3;
      if (this.isRootDesigner) {
        params.enableAll = true;
      }
      getProjects(params).then((data) => {
        if (data.code == 1) {
          this.prjlists = data.data.items;
        } else {
          this.$Message.error(data.data.message);
        }
      });
    },
    // 查询工程对应的工程场景
    getPrjSceneList(projectId) {
      if (projectId) {
        let params = {
          pageIndex: 1,
          pageSize: 2147483647,
          projectId: projectId
        };
        this.formV.testId = '';
        this.formV.testName = '';
        let type = 'train';
        getTests(params).then((data) => {
          // 过滤掉不同类型并且不可用的场景
          this.testList = data.data.items.filter((item) => item.type == type);
          if (this.testList.length > 0) {
            // this.formV.testId = this.testList[0].id;
            // this.formV.testName = this.testList[0].name;
          } else {
            // this.formV.testId = ''
            // this.formV.testName = ''
          }
        });
      }
    },
    // 切换工程时，将工程名称同步为工程的名称，同时查询工程关联的工程场景
    getPrjName(prjInfo) {
      if (prjInfo) {
        this.formV.projectId = prjInfo.value;
        this.formV.projectName = prjInfo.label;
        // 查询工程场景
        this.getPrjSceneList(prjInfo.value);
      }
    },
    // 点击确认按钮关闭DatePicker组件时，标记状态
    clickOkBtn() {
      this.isClickOkBtn = true;
      this.formV.startTime = this.formV.Dates[0];
      this.formV.endTime = this.formV.Dates[1];
    },
    clickClearBtn() {
      this.formV.Dates = [];
      this.clickOkBtn();
    },
    changeDates(timeList) {
      this.formV.Dates = timeList;
    },
    // 切换DatePicker组件显示/关闭的状态
    switchOpenChange(isOpen) {
      this.$nextTick(() => {
        if (isOpen) {
          // 显示组件
          this.isClickOkBtn = false;
          this.originalTime = this.formV.Dates;
        } else {
          // 隐藏操作
          if (!this.isClickOkBtn) {
            // 不是通过点击确认按钮关闭DatePicker组件时，复原时间
            this.formV.Dates = this.originalTime;
            // 上面时间复原后，数据虽然正确，但是子组件时间输入框和日历组件选中的日期都不对，所以需要用下面的代码手动设置一次
            let beginTime = this.originalTime[0];
            let endTime = this.originalTime[1];
            if (beginTime && endTime) {
              // 没有数据时，不要进行下面的赋值操作
              // 举个例子，当数据为‘2021-08-05 14’时，需要填充分钟，否则无法生成时间
              beginTime = beginTime.length !== 13 ? beginTime : `${beginTime}:00`;
              endTime = endTime.length !== 13 ? endTime : `${endTime}:00`;
              this.$refs['datePicker'].internalValue = [new Date(beginTime), new Date(endTime)];
              this.$refs['datePicker'].focusedDate = new Date(beginTime);
            } else {
              this.$refs['datePicker'].handleClear();
            }
          } else {
            this.timeChange(this.formV.Dates);
          }
        }
      });
    },
    // 修改时间时，验证时间的正确性并自动设置正确时间
    timeChange(timeArr) {
      if (timeArr.length > 0) {
        if (new Date(timeArr[0]).getTime() < new Date().getTime()) {
          // 如果开始时间小于当前时间
          this.formV.Dates = [
            this.timestampToTime(new Date().getTime() + 60 * 3 * 1000),
            timeArr[1]
          ];
          this.timeChange(this.formV.Dates);
          return;
        }
        if (new Date(timeArr[1]).getTime() < new Date(timeArr[0]).getTime()) {
          // 如果结束时间小于开始时间
          this.formV.Dates = [
            timeArr[0],
            this.timestampToTime(new Date(timeArr[0]).getTime() + 60 * 60 * 1000)
          ];
          this.timeChange(this.formV.Dates);
          return;
        }
        this.formV.startTime = timeArr[0] ? timeArr[0] + ':00' : '';
        this.formV.endTime = timeArr[1] ? timeArr[1] + ':00' : '';
      }
    },
    // 将时间戳转义为字符串
    timestampToTime(timestamp) {
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
      return Y + M + D + h + m;
    },
    // 提交按钮
    submitBtn(name) {
      if (this.isCreat) {
        // 创建
        this.creatSub(name);
      } else {
        // 修改
        this.modifySub(name);
      }
    },
    // 重置按钮
    resetBtn(name) {
      this.$refs[name].resetFields();
    },
    // 创建提交
    creatSub(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let params = {
            description: this.formV.description,
            name: this.formV.name,
            projectId: this.formV.projectId,
            testId: this.formV.testId,
            companyId: this.companyId,
            projectName: this.formV.projectName,
            testName: this.formV.estName,
            startTime: this.formV.startTime,
            endTime: this.formV.endTime
          };
          this.modelLoading = true;
          creatTrain(params)
            .then((res) => {
              if (res.data.code == 1) {
                this.$Message.success({
                  content: '创建成功',
                  duration: 5
                });
                this.formVModel = false;
                this.userGroupOnChange(1);
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 5
                });
              }
              this.modelLoading = false;
            })
            .catch((err) => {
              this.modelLoading = false;
              this.$Message.error('服务器连接失败！');
            });
        } else {
          this.$Message.error('请完善信息！');
        }
      });
    },
    // 修改按钮
    modifyTrainBtn(item) {
      this.getPrjList();
      this.getPrjSceneList(item.projectId);
      this.trainId = item.id;
      this.formV = {
        companyId: '',
        description: item.description,
        iconPath: '',
        name: item.name,
        projectId: item.projectId,
        projectName: item.projectName,
        testId: item.testId,
        testName: '',
        startTime: item.startTime || '',
        endTime: item.endTime || '',
        Dates: []
      };
      this.formV.Dates[0] = this.formV.startTime;
      this.formV.Dates[1] = this.formV.endTime;
      this.formVModel = true;
      this.isCreat = false;
      this.modelTitle = '修改训练';
    },
    // 修改提交
    modifySub(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let params = {
            description: this.formV.description,
            name: this.formV.name,
            projectId: this.formV.projectId,
            testId: this.formV.testId,
            companyId: this.companyId,
            projectName: this.formV.projectName,
            testName: this.formV.estName,
            startTime: this.formV.startTime,
            endTime: this.formV.endTime,
            id: this.trainId
          };
          this.modelLoading = true;
          modifyTrain(params)
            .then((res) => {
              if (res.data.code == 1) {
                this.$Message.success({
                  content: '修改成功',
                  duration: 5
                });
                this.formVModel = false;
                this.getTrainList();
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 5
                });
              }
              this.modelLoading = false;
            })
            .catch((err) => {
              this.modelLoading = false;
              this.$Message.error('服务器连接失败！');
            });
        } else {
          this.$Message.error('请完善信息！');
        }
      });
    },
    // 删除训练
    delTrain(item) {
      delTrain(item.id)
        .then((res) => {
          if (res.data.code === 1) {
            this.$Message.success({
              content: '删除成功',
              duration: 3
            });
            this.getTrainList();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 5
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 训练详情页
    toSceneDetail(item) {
      sessionStorage.setItem('queryObj', this.queryObj);
      this.$router.push({
        name: 'trainSceneDetail',
        query: {
          id: item.id,
          projectId: item.projectId,
          name: item.name,
          testId: item.testId,
          status: item.progress,
          isImport: item.isImport
        }
      });
    }
  }
};
</script>
<style scoped>
.page-wrap {
  padding: 30px;
  height: 100%;
}
.page-content {
  background-color: #fff;
  border-radius: 10px;
  height: 100%;
}
.img-header {
  display: flex;
  justify-content: space-between;
  padding: 20px 20px 0 20px;
  width: 100%;
}
.member-filter-wrap {
  display: flex;
  justify-content: flex-end;
  width: calc(100% - 188px);
  padding-left: 10px;
}
.class-title-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.class-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.class-title-all {
  font-size: 18px;
  font-weight: 700;
  color: var(--default-color-level2);
}
.table-wrap {
  height: calc(100vh - 135px);
}
/* 新样式 */
.content-wrap {
  max-height: calc(100vh - 197px);
  width: 100%;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 20px;
  padding: 0 20px;
}
.project-item {
  width: 100%;
  border-radius: 4px;
  border: 2px solid rgb(231, 231, 241);
  padding: 10px 15px;
  margin-bottom: 15px;
}
.item-first-line {
  display: flex;
  justify-content: space-between;
}
.project-name-state {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.project-name {
  font-size: 16px;
  font-weight: 600;
  max-width: 400px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.project-status-text {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
}
.btn-icon-wrap {
  display: flex;
  justify-content: flex-end;
}
.click-icon {
  cursor: pointer;
  height: 22px;
  margin-left: 20px;
}
.project-other-info {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
  color: rgba(51, 51, 51, 0.4);
  font-weight: bold;
}
/* 省略图 */
.defGraphWrap {
  width: 100%;
  height: calc(100vh - 120px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.defGraph {
  height: 126px;
  width: 157px;
  background: url('../../assets/globalIcon/defGraph.png') no-repeat center center;
  background-size: 157px 126px;
}
.graphText {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}
</style>
